<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理系统 - 登录</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #7c4dff;
            --primary-light: #b388ff;
            --secondary-color: #651fff;
            --accent-color: #7c4dff;
            --text-dark: #2b2d42;
            --text-light: #f8f9fa;
            --error-color: #ff5252;
            --success-color: #00e676;
            --duration: 3s;
            --opacity: 0.5;
            --shooting-duration: 3s;
            --background-dark: #120e36;
            --background-light: #1a1566;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            color: var(--text-light);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, var(--background-dark), var(--background-light));
            overflow: hidden;
            position: relative;
        }

        /* 动态星空背景 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle var(--duration) infinite ease-in-out;
            opacity: var(--opacity);
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.2; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        /* 改进的流星效果 */
        .shooting-star {
            position: absolute;
            width: 150px;
            height: 2px;
            background: linear-gradient(to right,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,1) 30%,
            rgba(255,255,255,0) 100%);
            animation: shooting var(--shooting-duration) linear infinite;
            opacity: 0;
            filter: drop-shadow(0 0 8px white);
            transform: rotate(-45deg);
            z-index: 1;
        }

        .shooting-star::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            top: -4px;
            left: 0;
            filter: blur(2px);
        }

        @keyframes shooting {
            0% {
                transform: translateX(0) translateY(0) rotate(-45deg);
                opacity: 1;
            }
            70% {
                opacity: 1;
            }
            100% {
                transform: translateX(1000px) translateY(500px) rotate(-45deg);
                opacity: 0;
            }
        }

        /* 登录卡片 */
        .login-card {
            width: 100%;
            max-width: 420px;
            background: rgba(18, 14, 54, 0.8);
            border-radius: 20px;
            backdrop-filter: blur(12px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.15);
            overflow: hidden;
            z-index: 10;
            margin: 20px;
            transition: all 0.3s ease;
        }

        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 30px 50px rgba(0, 0, 0, 0.5);
        }

        /* 卡片头部 */
        .card-header {
            padding: 40px 30px;
            text-align: center;
            background: linear-gradient(135deg, rgba(124, 77, 255, 0.9), rgba(101, 31, 255, 0.9));
            color: white;
            position: relative;
            overflow: hidden;
        }

        .card-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                    to bottom right,
                    rgba(255, 255, 255, 0.15) 0%,
                    rgba(255, 255, 255, 0) 60%
            );
            transform: rotate(30deg);
            animation: shine 6s infinite;
        }

        @keyframes shine {
            0% { transform: rotate(30deg) translate(-30%, -30%); }
            100% { transform: rotate(30deg) translate(30%, 30%); }
        }

        .card-header h1 {
            font-weight: 600;
            font-size: 2rem;
            margin-bottom: 5px;
            position: relative;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .card-header p {
            font-weight: 300;
            opacity: 0.9;
            font-size: 0.95rem;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        }

        /* 表单样式 */
        .card-body {
            padding: 30px;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-light);
            font-size: 0.95rem;
        }

        .input-field {
            position: relative;
        }

        .input-field i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-light);
            font-size: 1.1rem;
            transition: all 0.3s;
        }

        .form-control {
            width: 100%;
            padding: 14px 15px 14px 45px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            font-size: 0.95rem;
            transition: all 0.3s;
            background: rgba(255, 255, 255, 0.15);
            color: var(--text-light);
            backdrop-filter: blur(5px);
        }

        .form-control:focus {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.3);
            outline: none;
            background: rgba(255, 255, 255, 0.25);
        }

        .form-control:focus + i {
            color: white;
            transform: translateY(-50%) scale(1.2);
        }

        /* 验证码区域 */
        .captcha-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .captcha-input {
            flex: 1;
        }

        .captcha-image {
            height: 50px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.15);
        }

        .captcha-image:hover {
            transform: scale(1.03);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        /* 记住我 & 忘记密码 */
        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 25px 0;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 0.9rem;
            color: var(--text-light);
        }

        .checkbox-label input {
            margin-right: 8px;
            accent-color: var(--primary-color);
        }

        .forgot-password {
            color: var(--primary-light);
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .forgot-password:hover {
            color: white;
            text-decoration: underline;
        }

        /* 登录按钮 */
        .login-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(124, 77, 255, 0.5);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(124, 77, 255, 0.7);
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .login-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                    to bottom right,
                    rgba(255, 255, 255, 0.3) 0%,
                    rgba(255, 255, 255, 0) 60%
            );
            transform: rotate(30deg);
            transition: all 0.6s;
        }

        .login-btn:hover::after {
            left: 100%;
        }

        /* 底部链接 */
        .card-footer {
            text-align: center;
            padding: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: var(--text-light);
        }

        .register-link {
            color: var(--primary-light);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
        }

        .register-link:hover {
            color: white;
            text-decoration: underline;
        }

        /* 错误提示 */
        .error-message {
            color: var(--error-color);
            font-size: 0.85rem;
            margin-top: 5px;
            display: none;
            animation: shake 0.5s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .login-card {
                margin: 15px;
                border-radius: 15px;
            }

            .card-header {
                padding: 30px 20px;
            }

            .card-body {
                padding: 25px 20px;
            }
        }
    </style>
</head>
<body>
<!-- 动态星空背景 -->
<div class="stars" id="stars"></div>

<!-- 登录卡片 -->
<div class="login-card">
    <div class="card-header">
        <h1>欢迎回来</h1>
        <p>请登录您的账户继续</p>
    </div>

    <div class="card-body">
        <form class="login-form" action="${pageContext.request.contextPath}/user/login" method="post">
            <c:if test="${not empty error}">
                <div class="error-message" style="display: block; text-align: center; margin-bottom: 20px; background: rgba(255, 82, 82, 0.15); padding: 10px; border-radius: 8px; border: 1px solid var(--error-color);">
                    <i class="fas fa-exclamation-circle"></i> ${error}
                </div>
            </c:if>

            <div class="form-group">
                <label for="username">用户名</label>
                <div class="input-field">
                    <i class="fas fa-user"></i>
                    <input type="text" id="username" name="username" class="form-control"
                           placeholder="请输入用户名" required autofocus>
                </div>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <div class="input-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="password" name="password" class="form-control"
                           placeholder="请输入密码" required>
                </div>
            </div>

            <div class="form-group">
                <label>验证码</label>
                <div class="captcha-group">
                    <div class="input-field captcha-input">
                        <i class="fas fa-shield-alt"></i>
                        <input type="text"
                               id="captchaInput"
                               name="code"
                               class="form-control"
                               placeholder="请输入验证码"
                               required
                               maxlength="4"
                               pattern="[A-Za-z0-9]{4}"
                               title="请输入4位字母数字组合"
                               oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <img id="captchaImage"
                         class="captcha-image"
                         src="${pageContext.request.contextPath}/user/getVerify"
                         onclick="refreshCaptcha()"
                         alt="验证码"
                         title="点击刷新验证码">
                </div>
                <small id="captchaError" class="error-message"></small>
            </div>

            <div class="form-options">
                <label class="checkbox-label">
                    <input type="checkbox" name="remember-me"> 记住我
                </label>
                <a href="#" class="forgot-password">忘记密码?</a>
            </div>

            <button type="submit" class="login-btn">
                <i class="fas fa-sign-in-alt"></i> 登 录
            </button>
        </form>
    </div>

    <div class="card-footer">
        还没有账户? <a href="${pageContext.request.contextPath}/user/register" class="register-link">立即注册</a>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 创建动态星空
    function createStars() {
        const container = document.getElementById('stars');
        const starCount = 300; // 增加星星数量
        const shootingStarCount = 5; // 增加流星数量

        // 创建普通星星 - 更明亮多彩
        for (let i = 0; i < starCount; i++) {
            const star = document.createElement('div');
            star.classList.add('star');

            const size = Math.random() * 3 + 1;
            const posX = Math.random() * 100;
            const posY = Math.random() * 100;
            const duration = Math.random() * 5 + 3;
            const opacity = Math.random() * 0.8 + 0.2;
            const hue = Math.random() * 60 + 200; // 蓝紫色调

            Object.assign(star.style, {
                width: `${size}px`,
                height: `${size}px`,
                left: `${posX}%`,
                top: `${posY}%`,
                '--duration': `${duration}s`,
                '--opacity': opacity,
                'animation-delay': `${Math.random() * 5}s`,
                'background-color': `hsl(${hue}, 100%, 80%)`
            });

            container.appendChild(star);
        }

        // 创建流星 - 改进效果
        function createShootingStar() {
            const shootingStar = document.createElement('div');
            shootingStar.classList.add('shooting-star');

            const startX = Math.random() * 20 - 20;
            const startY = Math.random() * 50;
            const duration = Math.random() * 2 + 1; // 1-3秒
            const delay = Math.random() * 10;
            const hue = Math.random() * 60 + 200; // 蓝紫色调

            Object.assign(shootingStar.style, {
                left: `${startX}%`,
                top: `${startY}%`,
                '--shooting-duration': `${duration}s`,
                'animation-delay': `${delay}s`,
                'background': `linear-gradient(to right,
                    hsla(${hue}, 100%, 80%, 0) 0%,
                    hsla(${hue}, 100%, 80%, 1) 30%,
                    hsla(${hue}, 100%, 80%, 0) 100%)`
            });

            container.appendChild(shootingStar);

            // 流星结束后移除
            setTimeout(() => {
                shootingStar.remove();
            }, duration * 1000);
        }

        // 初始创建流星
        for (let i = 0; i < shootingStarCount; i++) {
            createShootingStar();
        }

        // 定时创建新流星
        setInterval(createShootingStar, 2000);
    }

    // 刷新验证码
    function refreshCaptcha() {
        const timestamp = Date.now();
        $('#captchaImage')
            .css('opacity', 0.7)
            .attr('src', '${pageContext.request.contextPath}/user/getVerify?t=' + timestamp)
            .animate({opacity: 1}, 300);

        $('#captchaInput').val('').focus();
    }

    // 表单验证
    $(document).ready(function() {
        // 初始化星空
        createStars();

        // 表单提交验证
        $('form').on('submit', function(e) {
            let isValid = true;
            $('.error-message').hide();

            // 验证用户名
            if ($('#username').val().trim() === '') {
                $('#username').closest('.form-group').find('.error-message')
                    .text('请输入用户名').show();
                isValid = false;
            }

            // 验证密码
            if ($('#password').val().trim() === '') {
                $('#password').closest('.form-group').find('.error-message')
                    .text('请输入密码').show();
                isValid = false;
            }

            // 验证验证码
            const captcha = $('#captchaInput').val().trim();
            if (!/^[A-Z0-9]{4}$/.test(captcha)) {
                $('#captchaError').text('请输入4位有效验证码').show();
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: $('.error-message:visible').first().offset().top - 100
                }, 500);
            }
        });

        // 输入框动画
        $('.form-control').on('focus', function() {
            $(this).closest('.input-field').find('i').css({
                'color': 'white',
                'transform': 'translateY(-50%) scale(1.2)'
            });
        }).on('blur', function() {
            $(this).closest('.input-field').find('i').css({
                'color': 'var(--primary-light)',
                'transform': 'translateY(-50%) scale(1)'
            });
        });
    });
</script>
</body>
</html>